<template>
  <div class="box">
    <header>
      <span>宏烨找房后台管理系统</span>
    </header>
    <main>
        <div class="left-box">
        <div>{{user}}</div>
        <router-link v-for="(item,index) in leftList" :key="index" :to="item.path">
          <span>{{item.meta.name}}</span>
        </router-link>
      </div>
      <div class="right-box">
        <router-view></router-view>
      </div>
    </main>
  </div>
</template>

<script>
import axios from 'axios'
import {routes} from './router'
import filterRouter from './components/filterRoutes'
export default {
  name: "index",
  
  data() {
    return {
      leftList: filterRouter(routes[1].children,sessionStorage.getItem('shen')),
      user:sessionStorage.getItem('shen'),
    };
  }
};
</script>

<style>
* {
  margin: 0;
  padding: 0;
  list-style: none;
}

html,
body,
.app {
  width: 100%;
  height: 100%;
  display: flex;
}

.box {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.box header {
  width: 100%;
  height: 80px;
  background-color: #4381e6;
  line-height: 80px;
}

.box header span {
  color: white;
  font-size: 30px;
  font-weight: bold;
  margin-left: 2%;
}

.box main{
    flex: 1;
    overflow-y: auto;
    display: flex;
}

.app main .left-box {
  width: 230px;
  height: 100%;
  background-color: #001529;
}

.app main .left-box div {
  width: 100%;
  height: 70px;
  text-align: center;
  line-height: 70px;
  color: #757c84;
}

.app main .left-box span {
  display: inline-block;
  width: 100%;
  height: 60px;
  text-align: center;
  line-height: 60px;
}

.app main .left-box a {
  color: #757c84;
}

.app main .left-box .router-link-exact-active {
  color: white;
}

.app main .right-box {
  flex: 1;
  overflow-y: auto;
  border-left: 1px solid #ccc;
}
</style>